<template>
  <view class="flex flex-column align-center pageHeight bg_F5F5F5 wh_750">
    <SHeaderTitle ref="headerTitle" isDisplayBack title="称谓计算器" is-fixed
                  background="#FFFFFF"
                  @getPageHeight="getPageHeight" z-index="10">
    </SHeaderTitle>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <!--  我称呼对方的方式  -->
    <list-grap class="mt_77">
      <template v-slot:left>
        <view class="titleCalculator_left ml_20">
          <text class="titleCalculator_left_text">我称呼他（她）</text>
        </view>
      </template>
      <template v-slot:right>
        <view class="titleCalculator_right mr_20">
          <text class="titleCalculator_right_text">{{ page.targetAppellation || '自己' }}</text>
        </view>
      </template>
    </list-grap>
    <list-grap class="mt_81">
      <template v-slot:left>
        <view class="titleCalculator_left ml_20">
          <text class="titleCalculator_left_text">她（他）称呼我</text>
        </view>
      </template>
      <template v-slot:right>
        <view class="titleCalculator_right mr_20">
          <text class="titleCalculator_right_text">{{ page.beCalled || '自己' }}</text>
        </view>
      </template>
    </list-grap>
    <view class="titleCalculator_content mt_24">
      <view class="titleCalculator_content_text">
        {{ relativeValue }}
      </view>
    </view>
    <!--  称谓计算器  -->
    <view class="titleCalculator_titleCalculator mt_48">
      <view class="titleCalculator_titleCalculator_list flex align-center justify-center"
            v-for="(item,index) in page.ListTitles" :key="index"
            @click.stop="setRelativeValue(item)">
        <text class="titleCalculator_titleCalculator_list_text">{{ item.name }}</text>
      </view>
      <view class="titleCalculator_titleCalculator_results flex align-center justify-center">
        <text class="titleCalculator_titleCalculator_results_text">结果</text>
      </view>
    </view>
    <!--  操作按钮  -->
    <view class="titleCalculator_editButton mt_32">
      <view class="flex align-center justify-center" :class="page.sex == 1 ? 'bg_FF4206':'bg_FE9C7E'" @click.stop="switchGenders(1)"
            style="width: 174rpx;height: 100rpx;border-radius: 6rpx 6rpx 6rpx 6rpx;">
        <text style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 36rpx;color: #FFFFFF;">男性
        </text>
      </view>
      <view class="flex align-center justify-center" :class="page.sex == 2 ? 'bg_FF4206':'bg_FE9C7E'" @click.stop="switchGenders(2)"
            style="width: 174rpx;height: 100rpx;border-radius: 6rpx 6rpx 6rpx 6rpx;">
        <text style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 36rpx;color: #FFFFFF;">女性
        </text>
      </view>
      <view class="flex align-center justify-center"
            style="width: 174rpx;height: 100rpx;background: #DBDBDB;border-radius: 6rpx 6rpx 6rpx 6rpx;"
            @click.stop="lastStep">
        <text style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 34rpx;color: #000000;">上一步
        </text>
      </view>
      <view class="flex align-center justify-center"
            style="width: 174rpx;height: 100rpx;background: #DBDBDB;border-radius: 6rpx 6rpx 6rpx 6rpx;"
            @click.stop="reset">
        <text style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 34rpx;color: #000000;">重置
        </text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import { computed, reactive, watch } from 'vue';
  import ListGrap from '@/pages/commission/components/listGrap.vue';
  import sheep from '@/sheep';

  const page = reactive({
    headerHeight: 0,
    // 称谓列表
    ListTitles: [
      { name: '父亲', value: '6' },
      { name: '母亲', value: '7' },
      { name: '丈夫', value: '1' },
      { name: '妻子', value: '0' },
      { name: '哥哥', value: '2' },
      { name: '弟弟', value: '3' },
      { name: '姐姐', value: '4' },
      { name: '妹妹', value: '5' },
      { name: '儿子', value: '8' },
      { name: '女儿', value: '9' },
    ],
    relativeList: [],
    targetAppellation: '',
    beCalled:'',
    sex:1
  });
  const relativeValue = computed(() => {
    if (page.relativeList.length > 0) {
      let arr = [];
      page.relativeList.forEach(item => {
        arr.push(item.name);
      });
      return `我的${arr.join('的')}`;
    } else {
      return '自己';
    }
  });

  async function setRelation(){
    if (page.relativeList.length > 0) {
      let arr = [];
      page.relativeList.forEach(item => {
        arr.push(item.value);
      });
      let lastValue = arr[arr.length - 1];
      arr.pop();
      sheep.$api.genealogy.getTreeRelationCall({
        Relation: arr.length > 0 ? arr.join('') : -1,
        BasicsRelation: lastValue,
        sex:page.sex
      }).then(res => {
        page.targetAppellation = res.data.call;
        page.beCalled = res.data.called;
      });
    } else {
      page.targetAppellation = '自己';
      page.beCalled = '自己';
    }
  }

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function setRelativeValue(info) {
    page.relativeList.push(info);
    await setRelation()
  }

  async function lastStep() {
    if (page.relativeList.length > 0) {
      page.relativeList.pop();
    }
    await setRelation()
  }

  async function reset() {
    page.relativeList = [];
    await setRelation()
  }

  async function switchGenders(index) {
    page.sex = index;
    await setRelation()
  }
</script>


<style scoped lang="scss">
  .titleCalculator {
    width: 750rpx;
    min-height: 100vh;
    background: #FFFFFF;
    overflow: hidden;
  }

  .titleCalculator_left {
    .titleCalculator_left_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #292929;
    }
  }

  .titleCalculator_right {
    .titleCalculator_right_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #FF4206;
    }
  }

  .titleCalculator_content {
    width: 702rpx;
    min-height: 180rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;

    .titleCalculator_content_text {
      margin: 22rpx 20rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #292929;
    }
  }

  .titleCalculator_titleCalculator {
    width: 702rpx;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 32rpx;
    grid-auto-flow: row dense;

    .titleCalculator_titleCalculator_list {
      width: 165rpx;
      height: 100rpx;
      background: #FF9C7E;
      border-radius: 60rpx 60rpx 60rpx 60rpx;

      .titleCalculator_titleCalculator_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #FFFFFF;
      }
    }
  }

  .titleCalculator_titleCalculator_results {
    width: 344rpx;
    height: 100rpx;
    background: #FF9C7E;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    grid-column-end: span 2;

    .titleCalculator_titleCalculator_results_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      color: #FFFFFF;
    }
  }

  .titleCalculator_editButton {
    width: 702rpx;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: 32rpx;
    grid-auto-flow: row dense;
  }
</style>
